<template>
    <button @click="change(0)">1.vue</button>
    <button @click="change(1)">2.vue</button>
    <button @click="change(2)">3.vue</button>
    <hr>
    <one v-show="show[0]"></one>
    <two v-show="show[1]"></two>
    <ttt v-show="show[2]"></ttt>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import one from './components/1.vue'
import two from './components/2.vue'
import ttt from './components/3.vue'


const show = ref([false, false, false])

function change(num: number) {
    for (let i = 0; i < show.value.length; i++) {
        show.value[i] = false;
    }
    show.value[num] = true;
}


</script>

<style></style>